<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<ui:composition template="/pages/layout/masterLayout.xhtml">
	<ui:define name="tituloPagina">Componentes JSF - Parte 1</ui:define>
	<ui:define name="conteudo">

		<h1>Componentes</h1>
		<p>O JSF utiliza o conceito de "componentes" para a criação das
			páginas. Estes componentes possuem um comportamento bem definido e
			algumas variáveis de controle para utilização pelo desenvolvedor,
			assim como a possibilidade de serem extendidos para aprimorar suas
			funcionalidades.</p>
		<p>Existem desde componentes simples (para a exibição de texto,
			por exemplo) como componentes complexos (que manipulam tabelas com
			paginação, por exemplo), componentes visuais e componentes não
			visuais (componentes de passagem de parâmetro, controle de double
			submit, segurança, etc).</p>
		<p>Os componentes são incluídos em uma página através de tags
			(como se fossem tags XML), e devem ser declarados no início da página
			utilizando-se um alias (apelido) junto com a referência a sua
			biblioteca (conhecidas como "tag library").</p>
		<p>O desenvolvimento das páginas em JSF sempre são feitas via
			arquivo XML (ou seja, diga adeus ao HTML mal formatado!!). Todas as
			tags, por exemplo, precisam ser finalizadas adequadamente.</p>
		<pre class="prettyprint lang-html">&lt;html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"&gt;</pre>
		<p>A primeira declaração neste exemplo
			(xmlns="http://www.w3.org/1999/xhtml") não possui um alias (apelido),
			portantando todas as tags declaradas na biblioteca podem ser
			acessadas diretamente pelo seu nome normal. Para facilitar a vida, os
			desenvolvedores que já estão acostumados a utilizar as tags HTML
			declaram a bibliote do HTML desta forma, assim não precisam utilizar
			o alias.</p>
		<p>
			O item xmlns:<span style='color: red'>h</span>=<span
				style="color: blue">"http://java.sun.com/jsf/html"</span> declara os
			componentes do JSF que representam entidades HTML. As tags devem ser
			sempre precedidas pelo alias declarado, neste caso o alias escolhido
			foi o <span style='color: red'>h</span>, mas o desenvolvedor pode
			utilizar o alias que desejar. As bibliotecas mais comuns sempre são
			declaradas da mesma forma por conveniência: neste caso o 'h' serve
			para lembrar que os componentes desta biblioteca são relacionados com
			tags HTML.
		</p>
		<p>Outra biblioteca muito utilizada é a de componentes principais
			do JSF, normalmente declarada com o alias 'f'. Você consegue
			identificar qual é o nome da biblioteca no exemplo anterior?
			(Normalmente o nome das bibliotecas são URLs, mas o desenvolvedor da
			biblioteca pode registrá-la com a string que desejar).</p>
		<h2>h:outputText</h2>
		<p>Este componente é utilizado para renderizar textos na página. Ele é útil pois converte caracteres especiais automaticamente durante a geração da página HTML. Se você recuperar um texto do banco de dados com os símbolo "&lt;", por exemplo, o componente vai renderizar o caractere como &amp;lt;, poupando o desenvolvedor de escrever códigos especiais para este fim.</p>
		<p>O componente também é útil para associar textos dinâmicos (o texto pode ser obtido a partir de um managed bean) e pode ser associado a outros componentes para, por exemplo, formatar datas conforme o locale do usuário, formatar CPFs, CNPJs, etc.</p>
		<p>O atributo principal deste componente é o "value", que indica qual texto deve ser renderizado.</p>
		<p>Veja o exemplo e o resultado logo abaixo:</p>
		<pre class="prettyprint lang-html">&lt;h:outputText value="Meu texto de exemplo!" /&gt;
&lt;h:outputText value="<h:outputText value="#" />{introducaoELBean.umTextoQualquer}" /&gt;
</pre>
		<h:outputText value="Meu texto de exemplo!" /><br/>
		<h:outputText value="#{introducaoELBean.umTextoQualquer}" />
		<h2>h:inputText, h:inputTextArea e h:inputSecret</h2>
		<h2>h:commandButton e h:commandLink</h2>

	</ui:define>
</ui:composition>
</html>